<template>
  <div class="channel-edit">
    <!-- 当前登陆用户已经订阅的频道 -->
    <div class="channel">
      <van-cell title="我的频道" :border="false">
        <van-button size="mini" type="info" @click="isEditing = !isEditing">{{
          isEditing ? "取消" : "编辑"
        }}</van-button>
      </van-cell>
      <van-grid>
        <van-grid-item
          v-for="(item, index) in channels"
          :key="item.id"
          :class="{ red: index === curIdx }"
          @click="hClickMyChannel(index)"
        >
          <span>{{ item.name }}</span>
          <van-icon
            name="cross"
            class="btn"
            v-if="isEditing && item.id != 0"
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 当前登陆用户没有订阅的频道 -->
    <div class="channel">
      <van-cell title="可选频道" :border="false"></van-cell>
      <van-grid>
        <van-grid-item
          v-for="item in recommendChannels"
          :key="item.id"
          @click="hAddChannel(item)"
        >
          <span>{{ item.name }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>

import { getAllChannels, addChannels, delChannel } from '@/api/channel.js'
export default {
  name: 'ChannelEdit',
  data () {
    return {
      isEditing: false,
      allChannels: []
    }
  },
  props: ['channels', 'curIdx'],
  created () {
    this.loadAllChannels()
  },
  methods: {
    async loadAllChannels () {
      try {
        const res = await getAllChannels()
        this.allChannels = res.data.data.channels
      } catch (error) {
        console.log(error)
      }
    },
    async hAddChannel (channel) {
      try {
        const res = await addChannels([channel])
        // 1.我的频道多一项
        this.channels.push(channel)
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    hClickMyChannel (idx) {
      if (this.isEditing) {
        // 做删除
        this.doDeleteChannel(idx)
      } else {
        this.$emit('change-channel', idx)
      }
    },
    async doDeleteChannel (idx) {
      // 1. 根据下标找到id
      const id = this.channels[idx].id
      // 2. 发请求
      try {
        const res = await delChannel(id)
        if (idx < this.curIndex) {
          this.$emit('fixed-active-index')
        }
        this.channels.splice(idx, 1)
        console.log(res)
        this.$toast.success('删除频道成功')
      } catch (err) {
        console.log(err)
        this.$toast.fail('删除频道失败')
      }
      // 3. 更新视图
      //  从我的频道中，把当前项删除
      this.channels.splice(idx, 1)
    }

  },
  computed: {
    recommendChannels () {
      // 已有频道： [{id:1,name:'a'}]
      // 所有频道： [{id:1,name:'a'},{id:2,name:'b'},{id:3,name:'c'}]

      // 推荐频道： 所有频道 - 已有频道  ===> [{id:2,name:'b'},{id:3,name:'c'}]

      // 对所有频道的数据进行过滤：
      //   保存数据的条件是：当前这个频道没有在已有频道中出现
      const arr = this.allChannels.filter(channel => {
        // eslint-disable-next-line eqeqeq
        const idx = this.channels.findIndex(item => item.id == channel.id)
        // eslint-disable-next-line eqeqeq
        if (idx === -1) {
          return true
        }
      })
      return arr
      // return this.allChannels - this.channels
    }
  }
}
</script>

<style lang="less" scoped>
.channel {
  padding: 15px;
  font-size: 14px;
}
.btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
}
</style>
